<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Vertical Splitter</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../splitter.js"></script>

<!-- General page styles (not critical to the demos) -->
<link rel="stylesheet" type="text/css" href="main.css" />

<style type="text/css" media="all">

html, body { height: 100%; margin: 0; box-sizing:border-box; }

.splitter {
	height-x: 400px;
	height-x: 50%;
	height: calc(100% - 180px);
	height: -moz-calc(100% - 180px);
    height: -webkit-calc(100% - 180px);
    margin: 1em 3em;
    border: 4px solid #bdb;
    background: #f8fff8;
    boo: 45px;
}

.ui-state-default { background-color: #aca }
.ui-state-hover { background-color: #bdb }
.ui-state-highlight { background-color: #add }
.ui-state-error { background-color: #eaa }

.splitter-pane {
    overflow: auto;
}
.splitter-bar-vertical {
    width: 6px;
    height-x: 100%;
    background-image: url(img/vgrabber.gif);
    background-repeat: no-repeat;
    background-position: center;
}

.splitter-bar-vertical-docked {
    width: 10px;
    background-image: url(img/vdockbar-trans.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.splitter-bar.ui-state-highlight {
    opacity: 0.7;
}
.splitter-iframe-hide {
    visibility: hidden;
}
</style>
<script type="text/javascript">

$().ready(function() {
    makeSplitter();
});

function makeSplitter()
{
    $("#MySplitter").splitter({
        type: "v",
        outline: true,
        sizeLeft: 150,
        minLeft: 100,
        minRight: 100,
        resizeToWidth: true,
        dock: "right",
        dockSpeed: 200,
        dockKey: 'Z',   // Alt-Shift-Z in FF/IE
        accessKey: 'I'  // Alt-Shift-I in FF/IE
    });
}

function MyToggleDock() {
    $('#MySplitter').trigger('toggleDock');
}
function MyDock() {
    $('#MySplitter').trigger('dock');
}
function MyUndock() {
    $('#MySplitter').trigger('undock');
}
function MyDestroy() {
    $('#MySplitter').trigger('destroy');
}

</script>
</head>
<body>

<h1>jQuery Docking Splitter</h1>
<p>
This example demonstrates the use of a <em>docking</em> splitbar that animates a full move to the left or right.
Undocking the splitter returns the splitbar to the position it had before docking.
The user can also drag the splitbar in or out of the docked position.
If the splitter specifies a minimum or maximum value for the left or right pane, those values will be enforced
whenever the splitbar is undocked.
</p>
<p>
<a href="index.html">See the splitter documentation</a>
</p>
<div id="MySplitter">

    <div id="LeftPane">
        <p>This is the left side of the vertical splitter. Typically you might use this side for a navigational display of some data that is related to the right side.</p>
        <p>Using CSS styles you can control the look of the splitter, such as its color, width, and appearance when selected. Or, you can specify most options when you call the plugin to create the splitter.</p>
    
        <p><a href="javascript:MyToggleDock();">trigger toggleDock</a></p>
        <p><a href="javascript:MyDock();">trigger dock</a></p>
        <p><a href="javascript:MyUndock();">trigger undock</a></p>
        <p><a href="javascript:MyDestroy();">trigger destroy</a></p>
        
    </div>
    
    <div id="RightPane">
        <p>This is the right side of the vertical splitter. Usually this side will be wider than the left side, but that's up to you. The left pane of this demo was set to be 150 pixels wide in the stylesheet, which is why the right pane is initially larger. If you don't specify a width for either panes when the splitter is created, the two panes will be equal width.</p>
        
                <p>This is the right side of the vertical splitter. Usually this side will be wider than the left side, but that's up to you. The left pane of this demo was set to be 150 pixels wide in the stylesheet, which is why the right pane is initially larger. If you don't specify a width for either panes when the splitter is created, the two panes will be equal width.</p>
                
                        <p>This is the right side of the vertical splitter. Usually this side will be wider than the left side, but that's up to you. The left pane of this demo was set to be 150 pixels wide in the stylesheet, which is why the right pane is initially larger. If you don't specify a width for either panes when the splitter is created, the two panes will be equal width.</p>

        <p>The splitter plugin supports the use of the keyboard to move the splitbar via the browser's accessKey feature. To move the splitbar in IE or Firefox, press <kbd>Alt-Shift-L</kbd>, then press the arrow keys. To unfocus the splitbar, press <kbd>Tab</kbd>. In Opera, press <kbd>Shift-Esc</kbd> and then the letter <kbd>L</kbd>; remove focus with <kbd>Esc</kbd>.</p>
        
        <p><a href="javascript:MyToggleDock();">trigger toggleDock</a></p>
        <p><a href="javascript:MyDock();">trigger dock</a></p>
        <p><a href="javascript:MyUndock();">trigger undock</a></p>
        <p><a href="javascript:MyDestroy();">trigger destroy</a></p>
        
    </div>

</div>

</body>

</html>
